import React from 'react';
import 'antd/dist/antd.css';
import store from './store';
import * as creators from './store/actionCreators';
import TodoListUI from './TodoListUI';

class TodoList extends React.Component {
	constructor(props) {
		super(props);
		this.state = store.getState();
	}

	componentDidMount() {
		store.subscribe(this.storeChange);
		// const action = creators.getTodoList();
		const action = creators.getMyListAction();
		store.dispatch(action);
		console.log(action);
	}

	storeChange = () => {
		this.setState(store.getState());
	};

	changeInputValue = (e) => {
		const action = creators.changeInputAction(e.target.value);
		store.dispatch(action);
	};

	clickBtn = () => {
		const action = creators.addItemAction();
		store.dispatch(action);
	};

	deleteItem = (index) => {
		const action = creators.deleteItemAction(index);
		store.dispatch(action);
	};

	render() {
		return (
			<TodoListUI
				inputValue={this.state.inputValue}
				changeInputValue={this.changeInputValue}
				clickBtn={this.clickBtn}
				list={this.state.list}
				deleteItem={this.deleteItem}
			/>
		);
	}
}

export default TodoList;
